<template>
	<div class="ground-container">
		111
		</div>
</template>
 
<script>
	// import app from '../../App.vue'
	export default {
		data() {
			return {
				hotListCate: null,
				currentIndex: 0,
				tags: {
					playlistTag:{
						name: "推荐"
					},
					id: 5000
				},
				swiperHeight: '',
				// iac: app.globalData.iac,
				playListData: [null],
				tag: '',
				inter: null,
				inter2: null
			}
		},
		onLoad() {
			this.getHotList()
		},
		onUnload() {
			// clearInterval(this.inter)
			// clearInterval(this.inter2)
		},
		onReady() {
			// this.inter = setInterval(()=>{
			// 	this.swiperHeight = document.querySelector('.playListComponet').getClientRects()[0].height
			// }, 100)
			// setTimeout(()=>{
			// 	clearInterval(this.inter)
			// },20000)
		},
		components:{
		},
		methods: {
			getHotList(){
				uni.request({
					url: 'http://119.3.174.206:3000/playlist/hot',
					success: (res) => {
						console.log(res.data)
						this.hotListCate = [this.tags,...res.data.tags]
					}
				})
			},
			indexChange(e){		
				this.currentIndex = e.detail.current
				// this.inter2 = setInterval(()=>{this.swiperHeight = document.querySelectorAll('.playListComponet')[this.currentIndex].offsetHeight},100)
				// setTimeout(()=>{clearInterval(this.inter2)},3000)
			},
			click(index){
				this.currentIndex = index
			},
			// showPlayView(){
			// 	this.$refs.playView.show()
			// },
			// hidePlayView(){
			// 	this.$refs.playView.hide()
			// }
			getPlayListData(){
				for(let i = 1; i < this.hotListCate.length; i++){
					uni.request({
						url: 'http://119.3.174.206:3000/top/playlist?cat='+this.hotListCate[i].playlistTag.name,
						success: (res) => {
							// console.log(res)
							// this.playListData[i] = res.data
						}
					})
				}
			}
			// 	console.log(this.playListData)
			// }
			
		}
	}
</script>

<style lang="less" scoped>
	.ground-container {
		font-size: 28rpx;
		height: 100%;
		scroll-view {
			position: fixed;
			z-index: 7;
			background-color: #fff;
		}
		.top {
			margin: 10rpx 0;
			white-space: nowrap;
			view {
				display: inline-block;
				padding: 0 30rpx;
				height: 70rpx;
				// width: 70rpx;
				text-align: center;
				line-height: 70rpx;
			}
			.active {
				p {border-bottom: 2rpx solid red; color: red}
			}
		}
		swiper {
			min-height: 100%;
			// max-height: 290%;
			// height: auto;
			// background-color: pink;
			padding-top: 100rpx;
		}
		.music-play {
			position: fixed;
			bottom: 0;
			width: 100%;
			// height: 100px;
		}
		
	}
</style>
